<%- include('../../layouts/base/header', { title: '服务器错误' }) %>

<div class="flex flex-col items-center justify-center py-16 px-4">
    <div class="text-center">
        <h1 class="text-7xl font-bold text-gray-800 mb-4">500</h1>
        <p class="text-2xl font-semibold text-gray-700 mb-6">服务器错误</p>
        <div class="w-16 h-1 bg-blue-600 mx-auto mb-8 rounded"></div>
        <p class="text-gray-600 mb-10 max-w-md mx-auto">抱歉，服务器遇到了问题。我们正在努力修复。请稍后再试，或返回首页。</p>
        <a href="/" class="px-5 py-2 space-x-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300 inline-flex items-center shadow-lg">
            <i class="fas fa-home"></i>
            <span>返回首页</span>
        </a>
    </div>

    <!-- 开发环境下显示错误信息 -->
    <% if (error.stack) { %>
        <div class="mt-12 p-6 bg-red-50 border border-red-200 rounded-lg w-full max-w-4xl shadow">
            <h3 class="font-semibold text-red-800 mb-3 space-x-2 flex items-center">
                <i class="fas fa-exclamation-triangle"></i>
                <span>错误详情：</span>
            </h3>
            <pre class="text-sm text-red-700 overflow-x-auto p-4 bg-red-100 rounded"><%= error.stack %></pre>
        </div>
    <% } %>
</div>

<%- include('../../layouts/base/footer') %>